/* //? example
  <Time-Picker
    :value="value"
    :disabled="false"
    :expand-picker="{
      disabledDate: time => {
        return time.getTime() > Date.now();
      },
      shortcuts: [
        {
          text: 'cqc',
          setDate: () => {
            return new Date('2011-01-06')
          }
        }
      ]
    }"
    :personal-style="{
        backGroundColor: 'blanchedalmond',
        fontColor: 'red',
        nearlyMonthFontColor: 'blue',
        todayFontColor: '#0FF7E0',
        disabledBackgroundColor: 'red',
        currentBorderRadius: '6px',
        currentBackGroundColor: 'red',
        currentFontColor: '#fff'
    }
    "
    @change="v => itemEditMark(item, v)"
    type="date"
    value-format = "yyyy-MM-dd"
  />
*/

/** @type {*}
 * @props
 * {
 * placeholder
 * value // 值  同ele time-picker
 * valueFormat // 日期格式化 同ele time-picker
 * type //时间拾取器类型 同ele time-picker
 * disabled // 禁用 同ele time-picker
 * expandPicker // 扩展
 *   {
 *     disabledDate // (time) => boolean 拾取器内部要禁用掉的某些时间点
 *     shortcuts // [{}]  每个对象内应有 text: String  setDate: () => Date
 *   }
 * }
 * personalStyle: {} // 个性化定制弹框
 *    backGroundColor, // 背景色
      fontColor, // 本月字体颜色
      nearlyMonthFontColor, // 上下月的字体颜色
      todayFontColor, // 今天的字体颜色
      currentFontColor, // 选中的字体颜色
      currentBackGroundColor, // 选中的背景颜色
      currentBorderRadius, // 选中的边框弧度
      disabledBackgroundColor // 禁用的背景颜色

      inputColor  // 输入框颜色
      inputBorderColor // 输入框边框色
*
* @event
* change(changeValue)
*/
import { DatePicker } from 'element-ui';

const TIME_PICKER_STYLE = {
  width: '100%'
};

const PICKER_TIME_CLASS = 'personalPicker-dialog-style';

const TimePicker = {
  props: {
    value: {
      type: [String, Date, Array],
      default: ''
    },

    valueFormat: {
      type: String,
      default: ''
    },

    placeholder: {
      type: String,
      default: '请选择'
    },

    type: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    expandPicker: {
      type: Object,
      default: () => ({})
    },

    personalStyle: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      pickerProps: {
        on: {
          input: (v) => this.pickerChange(v),
          focus: () => this.pickerDialogShow(),
          blur: (e) => this.blur(e)
        },

        style: { ...TIME_PICKER_STYLE },

        props: {
          valueFormat: this.valueFormat,
          disabled: this.disabled,
          type: this.type,
          pickerOptions: null,
          value: null,
          placeholder: this.placeholder,
          'popper-class': PICKER_TIME_CLASS
        }
      }
    };
  },

  model: {
    prop: 'value',
    event: 'change'
  },

  methods: {
    pickerChange(v) {
      this.$emit('change', v || '');
    },

    pickerDialogShow() {
      this.$nextTick(() => {
        this.setTimePickStyle();
      });
    },

    blur(e) {
      this.$emit('blur', e);
    },

    // 设置dialog样式
    setTimePickStyle() {
      const dialogs = document.querySelectorAll('.' + PICKER_TIME_CLASS);
      const personalStyle = this.personalStyle;
      const cssVariableMap = {
        backGroundColor: '--dialog-bg-color', // 背景色
        fontColor: '--dialog-font-color', // 本月字体颜色
        nearlyMonthFontColor: '--dialog-nearly-month-color', // 上下月的字体颜色
        todayFontColor: '--dialog-today-color', // 今天的字体颜色
        currentFontColor: '--dialog-current-color', // 选中的字体颜色
        currentBackGroundColor: '--dialog-current-bg-color', // 选中的背景颜色
        currentBorderRadius: '--dialog-current-border-radius', // 选中的边框弧度
        disabledBackgroundColor: '--dialog-disabled-bg-color' // 禁用的背景颜色
      };

      dialogs.forEach(el => {
        const dialog = el.style;
        for (const key in this.personalStyle) {
          if (key in cssVariableMap) {
            const cssKey = cssVariableMap[key];
            dialog.setProperty(cssKey, personalStyle[key]);
          }
        }
      });
    }
  },

  computed: {
    pickerOptions() {
      const expand = this.expandPicker;
      const shortcuts = expand.shortcuts;

      const opt = {
        disabledDate(time) {
          const disabledDate = expand.disabledDate;
          if (disabledDate) { // 时间禁选（某些） // 返回 true 表示禁用
            if (Object.prototype.toString.call(disabledDate) === '[object Function]') {
              return disabledDate(time);
            }
          }

          return false;
        }
      };

      if (shortcuts && Object.prototype.toString.call(shortcuts) === '[object Array]') {
        const cacheShorcuts = shortcuts.reduce((prev, curr) => {
          prev.push({
            text: curr.text,
            onClick(picker) {
              picker.$emit('pick', curr.setDate() || new Date());
            }
          });
          return prev;
        }, []);

        Reflect.set(opt, 'shortcuts', cacheShorcuts);
      }

      return opt;
    },

    timerPickerProps() {
      return this.pickerProps.props;
    }
  },

  render(h) {
    const { pickerProps, personalStyle } = this;
    return h(
      'div',
      {
        class: {
          personalPicker: true
        },

        style: {
          '--picker-container-color': personalStyle.inputColor,
          '--picker-container-border-color': personalStyle.inputBorderColor
        }
      },
      [
        h(DatePicker, { ...pickerProps })
      ]
    );
  },

  watch: {
    value: {
      handler: function(v) {
        this.timerPickerProps.value = v;
      },

      immediate: true
    },

    type: {
      handler: function(v) {
        this.timerPickerProps.type = v;
      }
    },

    disabled: {
      handler: function(v) {
        if (v) {
          this.timerPickerProps.disabled = v;
        }
      }
    },

    expandPicker: {
      handler: function(v) {
        if (v && Object.keys.length) {
          this.timerPickerProps.pickerOptions = this.pickerOptions;
        }
      },
      immediate: true,
      deep: true
    }
  }
};

export default TimePicker;
